<template>
  <div>
    <!-- 字典项列表弹框 -->
    <el-dialog
      v-model="listDialogVisible"
      :title="title + '字典项列表'"
      width="600px"
      @close="handleListDialogClose"
    >
      <div class="action-box">
        <add-button @click="openEditDialog()">添加字典项</add-button>
      </div>
      <pro-table :columns="columns" :data="dataList">
        <template #action="{ row }">
          <edit-button size="small" @click="openEditDialog(row)">编辑</edit-button>
          <del-button size="small" @click="deleteItem(row)">删除</del-button>
        </template>
      </pro-table>
    </el-dialog>

    <!-- 编辑弹框 -->
    <base-dialog
      v-model="editDialogVisible"
      title="添加字典项"
      @ok="handleSaveItem"
      @cancel="editDialogVisible = false"
    >
      <pro-form
        ref="itemFormRef"
        :formItems="dicItemColumns"
        :formData="ItemformData"
        :showAction="false"
      ></pro-form>
    </base-dialog>
  </div>
</template>

<script setup>
  import {
    deleteDictItem,
    getDictionaryItemList,
    saveDictItem
  } from '@/services/apis/system/dictionary'
  import { dicItemColumns } from '../config'
  import { ref, reactive } from 'vue'
  const props = defineProps({
    title: {
      type: String,
      default: ''
    }
  })
  const listDialogVisible = ref(false)
  const editDialogVisible = ref(false)
  const itemFormRef = ref(null)
  const code = ref('') // 字典代码
  const columns = [
    {
      label: '标签名称',
      prop: 'label'
    },
    {
      label: '标签值',
      prop: 'value'
    },
    {
      label: '排序',
      prop: 'sort'
    },
    {
      label: '操作',
      slot: 'action',
      width: 200,
      fixed: 'right'
    }
  ]
  const dataList = ref([]) // 模拟数据列表

  const ItemformData = ref()

  const editFormRef = ref(null)

  const fetchData = async type_code => {
    const res = await getDictionaryItemList({ code: type_code || code.value })
    dataList.value = res.list || []
  }

  function openEditDialog(row) {
    editDialogVisible.value = true
    console.log('row  hdagaks', row, code.value)
    ItemformData.value = row ? row : { type_code: code.value }
  }

  const deleteItem = async row => {
    const res = await deleteDictItem({ id: row.id })
    if (res) {
      ElMessage.success('删除成功')
      fetchData(code.value)
    } else {
      ElMessage.error('删除失败')
    }
  }

  function resetEditForm() {
    Object.assign(ItemformData.value, { id: null, label: '', value: '', sort: 0 })
  }

  async function submitEditForm() {
    const valid = await itemFormRef.value?.validate()
    if (valid) {
      const data = itemFormRef.value.formData
      const res = await saveDictItem(data)
      if (res) {
        editDialogVisible.value = false
        fetchData()
      }
    }
  }

  const handleSaveItem = async () => {
    const valid = await itemFormRef.value?.validate()
    if (valid) {
      const data = itemFormRef.value.formData
      const res = await saveDictItem(data)
      if (res) {
        editDialogVisible.value = false
        fetchData()
      }
    }
  }

  function handleListDialogClose() {
    console.log('guanbibbbb')
    listDialogVisible.value = false
    // resetEditForm()
  }

  // 对外暴露打开列表弹框方法
  defineExpose({
    open: propCode => {
      listDialogVisible.value = true
      code.value = propCode
      fetchData(propCode)
    }
  })
</script>
